<template>
    <div class="box">
        <div class="header"><van-icon name="arrow-left" @click="$router.back" />投诉举报</div>
        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <van-field v-model="username" name="投诉人" label="投诉人" placeholder="投诉人"
                    :rules="[{ required: true, message: '请填写投诉人姓名' }]" />
                <van-field v-model="result" is-link readonly name="picker" label="投诉类型" placeholder="点击选择投诉类型"
                    @click="showPicker = true" />
                <van-field v-model="password" type="text" name="内容" label="内容" placeholder="内容"
                    :rules="[{ required: true, message: '请填写投诉内容' }]" />

                <van-popup v-model:show="showPicker" position="bottom">
                    <van-picker :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" />
                </van-popup>
            </van-cell-group>
            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit" @click="submitNo">
                    提交
                </van-button>
            </div>
        </van-form>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { showSuccessToast } from 'vant'
const username = ref('')
const password = ref('')
const result = ref('');
const showPicker = ref(false)
const columns = [
    { text: '卡密尔', value: '卡密尔' },
    { text: '瑟提', value: '瑟提' },
    { text: '克列', value: '克列' },
    { text: '约里克', value: '约里克' },
    { text: '菲奥娜', value: '菲奥娜' },
]
const onConfirm = ({ selectedOptions }) => {
    result.value = selectedOptions[0]?.text
    showPicker.value = false
}
const onSubmit = (values: object) => {
    console.log('submit', values)
}
function submitNo() {
    if (result.value || password.value || username.value) {
        result.value = ''
        password.value = ''
        username.value = ''
        showSuccessToast('提交成功')
    }
}
</script>

<style lang="scss" setup>
.van-button--primary {
    background-color: #4bc4b1;
    border-color: #4bc4b1;

}

.header {
    .van-icon {
        position: fixed;
        left: 10px;
        top: 15px;
        font-size: 20px;
    }
}
</style>